<style lang="scss" scoped>
    ul,li{
        padding: 0;
        margin: 0;
    }
    .bg{
        width:100%;
    }
    h2{
        text-align: center;
    }
    section:nth-child(odd){
        background: #fff;
    }
    section:nth-child(even){
       background: #F5F7F7;
    }
    .rule_title{
        position: relative;
        width:1200px;
        margin:80px auto;
        text-align: center;
        a{
            position:absolute;
            color: #666;
            font-size: 16px;
            text-decoration: underline;
            text-align: right;
            right: 0;
            top: 10px;
        }
    }
    .step{
        width:818px;
        margin:80px auto;
        position:relative;
        .line {
            position:absolute;
            border-radius: 10px;
            bottom: 90px;
            height: 20px;;
            p{
                border-radius: 10px;
                height: 100%;
                background: var(--blue);
                animation: mymove 3s infinite;
            }
        }
    }
    .rule{
        .box{
            background: #fff;
            padding: 0 20px 20px;
            height: 730px;
            h3{
                line-height: 40px;
            }
            ul{
                padding: 0;
                margin: 0;
                list-style: none;
                li{
                    color: #666;
                    line-height: 25px;
                    font-size: 12px;
                }
            }
        }
        
    }
    @keyframes mymove{
        from {width:0;}
        to {width:100%;}
    }
    .reward{
        text-align: center;
        position: relative;
        &>h2{
            position:absolute;
            text-align: center;
            left: 0;right: 0;
            margin: auto;
            top: -100px;
        }
        .row{
            height: 124px;
            border-right: 1px solid #E0E0E0;
            &:last-child{
                border:0;
            }
        }
        .left{
            padding-right: 40px;
            position: relative;
            &>div{
                padding-right: 30px;
                h4{
                    font-size: 18px;
                }
                p{
                    color: #333;
                    font-size: 14px;
                    line-height: 45px;
                }
                a{
                    cursor: pointer;
                    font-size: 14px;
                    color: var(--blue);
                    line-height: 30px;
                }
            }
            img{
                position:absolute;
                right: 10px;
                top: 0;bottom: 0;
                margin: auto;
                width:64px;
            }
        }
        .center{
            margin: auto;
            display: flex;
            justify-content: space-around;
            padding: 0 40px;
            &>div{
                width:25%;
            }
            h4{
                font-size: 18px;
                img{
                    margin-top: -6px;
                }
            }
            h5{
                font-size: 14px;
                line-height: 45px;
            }
            p{
                font-size: 12px;
                color: #999;
                width:80%;
                margin: auto;
            }
            .item button{
                display: block;
                margin: 10px auto 30px;
                line-height: 28px;
                font-size: 16px;
                color: #fff;
                background: #4C8DEB;
                border-radius: 30px;
                width:170px;
                outline: none;
            }
            .item button:last-child{
                color: #4C8DEB;
                background: #fff;
                border:1px solid #4C8DEB;
            }
        }
        .right{
            &>img{
                width:90px;
            }
            h5{
                font-size: 16px;
                color: #999;
                img{
                    margin:-5px 10px 0 0;
                    width:26px;
                }
            }
            p{
                font-size: 12px;
                width:90%;
                color: #999;
                margin: auto;
            }
        }
    }
    .rank {
        text-align: center;
        h2 {
            span{
                font-size: 18px;
                margin-left: 10px;
                color: #999
            }
        }
        .container>p{
            line-height: 50px;
            color: #999;
        }
        .box{
            height: 430px;
            display: flex;
            border: 1px solid #E5E5E5;
            .left{
                position: relative;
                width:500px;
                height: 100%;
                background: url(../assets/altar.svg) no-repeat bottom #F5F7F7;
                background-size: contain;
                ul{
                    li{
                        position:absolute;
                    }
                    li:first-child{
                        bottom: 180px;
                        left: 0;right: 0;
                        margin: auto;
                    }
                    li:nth-child(2){
                        bottom: 100px;
                        left: 40px;
                    }
                    li:last-child{
                        bottom: 60px;
                        right: 40px;
                    }
                }
                .prize_txt{
                    color:#fff;
                    position:absolute;
                    font-size: 22px;
                    p{
                        font-size: 12px;
                        padding-left: 20px;
                        img{
                            width:20px;
                        }
                    }
                }
                .prize_txt:nth-child(2){
                    left: 0;right: 0;
                    bottom: 10px;
                    font-size: 30px;
                    p{
                        
                        font-size: 16px;
                        margin-top: 8px;
                    }
                }
                .prize_txt:nth-child(3){
                    left: 23px;
                    padding-left: 10px;
                    bottom: -4px;
                }
                .prize_txt:last-child{
                    right: 14px;
                    bottom: -6px;
                    font-size: 14px;
                }
            }
            .right{
                width:calc(100% - 500px);
                height: 100%;
                h3{
                    line-height: 40px;
                    margin-bottom: 20px;
                }
                ul li{
                    display: flex;
                    line-height: 40px;
                    h6{
                        font-size: 16px;
                        margin:0;
                        line-height: 40px;
                        text-align: center;
                        width:50px;
                        font-weight: bold;
                    }
                    .name{
                        width:200px;
                    }
                    .tel{
                        width:120px;
                    }
                    .num{
                        width:50px;
                    }
                    img{
                        width:20px;
                        display: block;
                        margin: -10px 20px 0 0;
                    }
                }

            }
        }
    }
    .activity_rule{
        width:1200px;
        margin: auto;
        position: relative;
        img{
            display: block;
            margin: auto;
        }
        a{
            position:absolute;
            font-size: 18px;
            color: #FDC42B;
        }
        a:nth-child(2){
            text-decoration: underline;
            left: 340px;
            top: 46px;
        }
        a:nth-child(3){
            text-decoration: underline;
            bottom: 175px;
            left: 260px;
        }
        a:nth-child(4){
            text-decoration: underline;
            top: 12px;
            right: 300px;
        }
        a:nth-child(5){
            text-decoration: underline;
            right: 156px;
            bottom: 232px;
            font-size: 14px;
        }
    }
</style>
<template>
    <div class="activity">
        <Top :user_type="user_type"/>
        <img src="@/assets/activity_top.svg" class="bg">
        <h2 class="rule_title">活动规则<a @click="rule_model=true">详细规则</a> </h2>
        <div class="activity_rule">
            <img src="@/assets/activity_rule.svg" >
            <a @click="TJ_event('活动-去完成1')" href="#share">去完成</a>
            <a @click="TJ_event('活动-去完成2')" href="#share">去完成</a>
            <a @click="TJ_event('活动-去完成3')" href="#share">去完成</a>
            <a @click="TJ_event('活动-去完成-排行榜')" href="#rank">排行榜</a>
        </div>
        <section class="step" line_w="80">
            <img  src="@/assets/step.svg">
            <div class="line" :style="{width:step[step_num]}"><p></p></div>
        </section>
        <section>
            <div class="container reward">
                <a id="reward"></a>
                <h2>我的奖励</h2>
                <div class="row col-lg-2 left">
                    <div>
                        <h4>{{fm.unique_code || '******'}}</h4>
                        <p>{{fm.name || '未知'}}</p>
                        <a @click="logout" v-if="user_type===2" class="logout">注销</a>
                    </div>
                    <img :src="my_face" >
                </div>
                <div class="row col-lg-8 center">
                    <div class="item">
                        <h4>{{fm.rank_no}} <img :src="my_trend" style="width:20px"></h4>
                        <h5>我排名数</h5>
                        <p v-if="user_type">{{fm.need_num?"还差"+fm.need_num+"次有效邀请可进入排行榜前10":'您已进入排行榜前10'}}</p>
                    </div>
                    <div class="item">
                        <h4>{{fm.invited_num}}</h4>
                        <h5>有效邀请人数</h5>
                        <p>{{prize_txt}}</p>
                    </div>
                    <div class="item">
                        <h4>{{fm.left_coupons_times}}</h4>
                        <h5>99元特价次数</h5>
                    </div>
                    <div class="item">
                        <button type="button" class="btn" @click="TJ_event('获取次数');$router.push('login')">获取次数</button>
                        <button type="button" class="btn">
                            <a target="_blank" @click="TJ_event('加群')" href="//shang.qq.com/wpa/qunwpa?idkey=a52809ddb0a7545606350e37aca072b43b60cc058aa88d68c105930b54d928ae">加入官方交流群</a>
                        </button>
                    </div>
                </div>
                <div class="row col-lg-2 right">
                    <img src="@/assets/qq_qun.png">
                    <h5><img src="@/assets/qq.svg">675376461</h5>
                    <p>加入官方QQ群随时关注活动信息，更有额外抽奖哦</p>
                </div>
            </div>
        </section>
        <section class="rank" v-if="rank_list.length">
            <a id="rank"></a>
            <div class="container">
                <h2>排行榜<span>第{{active_info.round}}期</span></h2>
                <p>{{`${active_info.start_time}~${active_info.end_time}`}}</p>
                <div class="box">
                    <div class="left">
                        <ul>
                            <li v-for="val in 3" :key="val" >
                                <img :src="require('@/assets/no'+val+'.svg')" alt=""> 
                                <h6>{{rank_list[val-1].client_name}}</h6>
                                <p>{{rank_list[val-1].client_tel | format_tel}}</p>
                            </li>
                        </ul>
                        <div class="prize_txt">{{rank_list[0].invite_num}}人<p>{{award_info.first_days}}天优惠特价</p></div>
                        <div class="prize_txt">{{rank_list[1].invite_num}}人<p>{{award_info.second_days}}天优惠特价</p></div>
                        <div class="prize_txt">{{rank_list[2].invite_num}}人<p>{{award_info.thirds_days}}天优惠特价</p></div>  
                    </div>
                    <div class="right">
                        <h3>更多排行</h3>
                        <ul>
                            <li v-for="(item,index) in rank_list.slice(3)" :key="index" class="flex">
                                <h6>{{item.no}}</h6>
                                <p class="name overflow_txt">{{item.client_name}}</p>
                                <p class="tel">{{item.client_tel | format_tel}}</p>
                                <p class="num">{{item.invite_num}}人</p>
                                <img :src="item.trend==0?rank_trend_down:rank_trend_up">
                                <p class="info">{{award_info.four_to_ten_num}}次特价申请机会</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </section>
        <h2 style="text-align:center;margin-top:50px">分享给朋友</h2>
        <Share :unique_code="fm.unique_code" />
        <Tail/>
        <Footer/>
        <Kefu :is_nav='false' />

            <div class="dialog rule" v-show="rule_model" >
                <div class="box">
                    <div class="close" @click="rule_model=false" >X</div>
                    <h3> 活动细则 </h3>
                    <ul>
                        <li>1.此活动仅针对于外观专利申请平台，新用户需注册外观平台账号才可领取相应奖励。</li>
                        <li>2.任意平台的新老用户均可成为邀请人，领取自己的邀请码即可参加活动。</li>
                        <li>3.主账号与子账号均可参加活动，共享同一邀请码，且子账号的奖励归主账号所有。 </li>
                        <li>4.被邀请人需是新用户：未注册派智任何平台的用户。</li>
                        <li>5.首次分享成功，奖励一次99元申请机会。</li>
                        <li>6.每成功邀请1位好友，增加邀请人1次99元外观专利申请资格。多邀多得，不设封顶。
                            <p>（完成的第一个有效邀请，双方均获得1次99元外观专利申请机会）</p>
                        </li>
                        <li>7.有效邀请数量达到3人后，申请次数额外增加2次。
                            <p>（每个账号享受一次，不可循环领取）</p>
                        </li>
                        <li>8.次数奖励实时到账，没有显示请刷新重试。</li>
                        <li>9.第一名获得三个月的99元外观申请资格（不限件数）</li>
                        <li>10.第二名获得两个月的99元外观申请资格（不限件数）</li>
                        <li>11.第三名获得一个月的99元外观申请资格（不限件数）</li>
                        <li>12.第四名至第十名，每人额外增加2次99元外观申请资格。</li>
                        <li>13.排行榜按有效邀请人数排名，实时更新。</li>
                        <li>14.若邀请人数相同的情况下，以邀请时间排序，时间越早的越排在前列。</li>
                        <li>15.排行榜每15天清零一次，数据次日进行结算，预计在3个工作日内将奖励发放至用户账户，用户也可登录平台查看。</li>
                        <li>16.外观专利申请机会不得转让，折现，与注册账号捆绑。</li>
                        <li>17.外观套件产品不享受此次活动，具体参加方式可咨询我司客服人员。</li>
                        <li>18.本次活动长期有效，最终解释权归派智平台所有。</li>
                        <h5  style="color:red;padding:6px 0">注:</h5>
                        <li>1.在新用户注册外观平台时输入邀请人的邀请码并注册成功，即完成一个有效邀请。</li>
                        <li>2.申请次数在用户支付99元后即消耗一次，即使申请被驳回，也消耗活动次数。</li>
                    </ul>
                </div>
            </div>
    </div>
</template>
<script>
import ("@/assets/init.scss")
import Top        from "@/components/top"
import Share      from "@/components/share"
import Tail   from "@/components/tail"
import Footer     from "@/components/footer"
import {userinfo,activity_rank} from "@/assets/api"
import Kefu   from "@/components/kefu"
import {swal} from 'vue-swal'
export default {
    data(){
        return {
            active_info:{
                round:1,
                start_time:'',
                end_time:''
            },
            my_face:require('@/assets/face0.png'),
            step:[0,'9%','34%','60%','100%'],
            step_num:0,
            rule_model:false,
            prize_txt:'',
            user_type:0,
            award_info:{},
            my_trend:require('@/assets/ranking_center.svg'),
            rank_trend_up:require('@/assets/ranking_up.svg'),
            rank_trend_down:require('@/assets/ranking_down.svg'),
            ewm_link:'',
            fm:{
                name:'',
                left_extra_num:0, //还差多少次可以获得额外申请机会
                invited_num:0, //邀请了多少个
                need_num:0, //剩余多少可进榜单
                left_coupons_times:0,  //剩余可用优惠次数
                rank_no:0,   //我的排名,
                unique_code:'',
                time:0,
                plus:0,
            },
            rank_list:[]

        }
    },
    methods:{
        explain_invite(){
            swal('派智知识管家','新用户填写邀请码并完成外观平台注册，视为一次有效邀请。','info')
        },
        myrandom(min=1,max=3){
           return Math.round(Math.random() * (max - min) + min)
        },
        logout(){
            self.location=this.host+'/activity'
        }
    },
    components:{
        Top,
        Share,
        Tail,
        Footer,
        Kefu
    },
    filters:{
        format_tel(val){
            return !val?'':val.substr(0,3)+'****'+val.substr(-4)
        }
    },
    created(){
        document.documentElement.scrollTop =0
        this.ewm_link='http://qr.topscan.com/api.php?text='+this.host+'/m'
        const invite_code=this.$route.query.invite_code
        const unique_code=localStorage.getItem('unique_code')
        const client_id=localStorage.getItem('client_id')

        if(invite_code){
            this.user_type=1
            localStorage.setItem('invite_code',invite_code)  
        }else if(unique_code && client_id){
            this.user_type=2
            this.ewm_link=this.ewm_link+'?invite_code='+unique_code
            
            userinfo(client_id,unique_code).then(res=>{
                if(res){
                    this.my_face=require('@/assets/face1.png')
                    for (const key in this.fm) 
                        this.fm[key]=res.data[key] || 0
                    let txt='立即分享即可得到一次申请机会'
                    if(res.data.has_shared){
                        this.step_num=1
                        txt='现在邀请，双方各得一次申请机会'
                        if(res.data.invited_num==1){
                            this.step_num=2
                            txt='还差2次有效邀请即可获得3次申请机会'
                        }
                        else if(res.data.invited_num==2){
                            txt='还差1次有效邀请即可获得3次申请机会'
                            this.step_num=3
                        }
                        else if(res.data.invited_num>2){
                            this.step_num=4
                            txt='您已获得所有奖励，查看你的排名吧'
                        }   
                    } 
                    this.prize_txt=txt
                    this.fm.time=res.data.left_extra.time
                    this.fm.plus=res.data.left_extra.plus
                    localStorage.setItem('name',res.data.name)
                    if(res.data.rank_trend!='-')
                       this.my_trend=require('@/assets/ranking_'+(res.data.rank_trend?'up':'down')+'.svg')
                }
            })
        }
        activity_rank({activity_id:1}).then(res=>{
            if(res){
                this.rank_list=res.data.list
                this.award_info=res.data.config.award
                this.active_info={
                    round:res.data.round,
                    start_time:res.data.start_time.substr(0,10),
                    end_time:res.data.end_time.substr(0,10)
                }
            }
        })
    }
    
}
</script>

